<template>
    <p>{{count}}</p>
    <button @click="add">+</button>
    <button @click="stateAdd">stateAdd</button>
</template>
<script setup>
import {ref,reactive,toRef} from 'vue';
/**
 * toRef可以从响应式对象中创建一个响应式的引用对象
 */
const state = reactive({
    count:0,
    message:'hello'
});
//把响应式对象state中的count属性变成一个响应式的引用对象
let count = toRef(state,'count');
console.log('countRef',count)
const add = ()=>countRef.value++;
const stateAdd = ()=>state.count++;
</script>